<template>
  <div class="hot-song-list">
    <h2>热门单曲推荐</h2>
    <ul>
      <li v-for="d in list" :key="d.id" @click="play(d.id)">
        <div
          class="cover"
          :style="{ 'background-image': `url(${d.cover})` }"
        ></div>
        <div class="info">
          <h3 class="el">{{ d.song }}</h3>
          <p class="el">{{ d.singer }}-{{ d.album }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      list: [],
    };
  },
  methods: {
    play(id) {
      this.$store.commit("setPlaylist", this.list);
      this.$store.commit("setCurrentId", id);

      console.log('123', this.$store.state.playlist, this.$store.state.currentId)
    },
  },
  created() {
    axios.get("/api/hit-single-list").then(({ data }) => {
      console.log(data);
      this.list = data.data;

      // 测试数据
      // this.$store.commit("setPlaylist", this.list);
      // this.$store.commit("setCurrentId", this.list[0].id);
    });
  },
};
</script>

<style lang="sass">
.hot-song-list
  h2
    line-height: 1rem
    font-size: .32rem
  li
    height: 1rem
    margin-bottom: .3rem
    display: flex
    align-items: center
    .cover
      width: 1rem
      height: 1rem
      margin-right: .3rem
      border-radius: .06rem
      border: 1px solid #5A485F
      background-repeat: no-repeat
      background-size: cover
    .info
      flex: 1
      h3
        font-size: .28rem
      p
        font-size: .24rem
        opacity: .4
</style>
